import { ArrowRightOutlined } from '@ant-design/icons';
import { Button, message } from 'antd';

interface IRoles {
  title: string;
  chatId: number;
}
const defaultRoles: IRoles[] = [
  {
    title: '英文翻译员',
    chatId: 0,
  },
  {
    title: '周报生成工',
    chatId: 0,
  },
  {
    title: '股市预测器',
    chatId: 0,
  },
  {
    title: '情感小助手',
    chatId: 0,
  },
  {
    title: '文案润色员',
    chatId: 0,
  },
];

// 当没有聊天内容时展示的内容
const EmptyChat: React.FC<any> = () => {
  const onBtnClick = (item: IRoles) => {
    message.info('程序员小哥正在努力开发中咯');
    console.log(item);
  };

  return (
    <div className='mx-auto w-full flex flex-col space-y-4 px-6 md:px-0 sm:max-w-[700px]'>
      <div className='text-center text-4xl font-semibold text-gray-800'>
        在对话中完成工作
      </div>
      <div className='text-center text-base text-gray-500'>
        我是一个智能对话系统，可以回答问题、查找资料、提供建议和执行简单操作，帮助你更高效地获取所需信息并提供支持。
      </div>
      <div className='text-center text-lg mt-[40px] text-gray-600 font-semibold '>
        快速开始
      </div>
      <div className='flex justify-around items-center'>
        {defaultRoles.map((item, index) => {
          return (
            <Button
              key={index}
              className='rounded-3xl'
              onClick={() => onBtnClick(item)}>
              {item.title} <ArrowRightOutlined />
            </Button>
          );
        })}
      </div>
    </div>
  );
};

export default EmptyChat;
